<template>
  <div>
    <BasicModal
      v-bind="$attrs"
      width="600px"
      :title="isUpdate ? t('common.edit') : t('common.create')"
      @register="registerModal"
      @ok="handleSubmit"
    >
      <BasicForm @register="registerForm">
        <template #taskCustomize>
          <Row v-for="item in customizeList" :key="item.id" :gutter="8">
            <Col :span="11">
              <span>{{ t('routes.project.projectTemplate.fieldName') }}</span>
              <Input
                v-model:value="item.customize"
                :placeholder="t('routes.project.projectTemplate.fieldNamePlaceholder')"
                style="width: 69%"
              />
            </Col>
            <Col :span="11">
              <span>{{ t('routes.project.projectTemplate.propertyName') }}</span>
              <Input
                v-model:value="item.customizeName"
                :placeholder="t('routes.project.projectTemplate.propertyNamePlaceholder')"
                style="width: 69%"
              />
            </Col>
            <Col :span="2">
              <Tooltip :title="t('common.delete')">
                <Icon icon="ion:ios-minus-outline" color="red" @click="removeItem(index, item)" />
              </Tooltip>
            </Col>
          </Row>
          <Row style="margin-top: 10px">
            <Col :span="24">
              <Tooltip :title="t('common.add')">
                <a-button style="width: 90%" type="dashed" @click="createItem">{{
                  t('common.add')
                }}</a-button>
              </Tooltip>
            </Col>
          </Row>
        </template>
      </BasicForm>
    </BasicModal>
  </div>
</template>

<script setup lang="ts">
  import { ref, unref } from 'vue';
  import { Row, Col, Input, Tooltip, Modal } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import { temDetailForm } from './tableData';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { BasicForm, useForm } from '/@/components/Form';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  const emit = defineEmits(['success', 'register']);
  const { t } = useI18n();
  const { createMessage } = useMessage();
  const isUpdate = ref(true);
  // 自定义属性列表
  const customizeList = ref([
    {
      customize: '',
      customizeName: '',
    },
  ]);

  // 添加自定义属性
  const createItem = () => {
    customizeList.value.push({
      customize: '',
      customizeName: '',
    });
  };

  // 删除自定义属性
  const removeItem = (index: number, item: any) => {
    const isEmpty = (value) => value == null || value.trim().length === 0;

    if (isEmpty(item.customize)) {
      customizeList.value.splice(index, 1);
    } else {
      Modal.confirm({
        title: '确认删除该属性？',
        icon: 'warning',
        onOk() {
          if (isEmpty(item.id)) {
            customizeList.value.splice(index, 1);
          } else {
            //DelTaskCustomize(item.id);
            customizeList.value.splice(index, 1);
          }
        },
        onCancel() {
          // 取消操作，不需要处理
        },
      });
    }
  };

  const [registerForm, { setFieldsValue, resetFields, validate }] = useForm({
    labelWidth: 100,
    baseColProps: { span: 24 },
    schemas: temDetailForm(),
    showActionButtonGroup: false,
    actionColOptions: { span: 23 },
  });

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    resetFields();
    setModalProps({ confirmLoading: false });
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
      setFieldsValue({ ...data.record });
    }
  });

  async function handleSubmit() {
    try {
      const values = await validate();
      setModalProps({ confirmLoading: true });
      // if (unref(isUpdate)) await UpdateResourceType(values);
      // else await CreateResourceType(values);

      closeModal();
      emit('success');
      createMessage.success(t('common.saveSuccess'));
    } finally {
      setModalProps({ confirmLoading: false });
    }
  }
</script>

<style scoped></style>
